<script >
import JavaConfig from "@/views/java/config.vue";
import JavaDownload from "@/views/java/download.vue";
import FrpVersion from "@/views/frp/version.vue";
import FastMapping from "@/views/frp/fastMapping.vue";
import {Star} from "@element-plus/icons-vue";
import FrpMonitor from "@/views/frp/frpMonitor.vue";
import Hello from "@/views/example/hello/Index.vue";
import SendEmail from "@/views/email/sendEmail.vue";
let this1;

export default {
  components: {SendEmail, Hello, FrpMonitor, Star, FastMapping, FrpVersion, JavaDownload, JavaConfig},
  data() {
    return {
      menu: [
        {
          label: "首页",
          value: "hello",
          noChildren: true,
        },
        {
          label: "JAVA",
          noChildren: false,
          children: [
            {
              label: "JAVA资源下载",
              value: "JavaDownload",
            },
            {
              label: "JAVA环境配置",
              value: "JavaConfig",
            },
            {
              label: "JAVA项目管理",
              value: "JavaConfig",
            },

          ],
        },
        {
          label: "C",
          children: [
            {
              label: "C环境配置",
              value: "2-1",
            },
            {
              label: "C项目管理",
              value: "2-2",
            },
          ],
        },
        {
          label: "minio服务器",
          children: [
            {
              label: "资源管理",
              value: "3-1",
            },
            {
              label: "参数配置",
              value: "3-2",
            },
            {
              label: "查询状态",
              value: "3-2",
            },
          ],
        },
        {
          label: "node版本管理",
          children: [
            {
              label: "版本管理",
              value: "4-1",
            },
            {
              label: "版本切换",
              value: "4-2",
            },
            {
              label: "项目管理",
              value: "4-3",
            },
          ],
        },
        {
          label: "内网映射管理",
          children: [
            {
              label: "版本管理",
              value: "frpVersion",
            },
            // {
            //   label: "映射管理",
            //   value: "2-2",
            // },
            {
              label: "快速映射(测试)",
              value: "fastMapping",
            },
            {
              label: "监控中心",
              value: "frpMonitor",
            },
          ],
        },
        {
          label: "邮件发送",
          children: [
            {
              label: "收件箱",
              value: "6.1",
            },
            {
              label: "6.2",
              value: "6.2",
            },
            {
              label: "发送调试",
              value: "sendEmail",
            },
          ],
        },
      ],
    //   当前页
      toPage: 'hello',
    //   当前时间
      today: new Date().Format("yyyy-MM-dd hh:mm:ss"),
    //   在线人数
      onlineUserNum: 0,
    };
  },
  mounted() {
    this1 = this;
    this.getTime();
    this.getMqttConnectInfo();
  },
  methods: {
// 获取mqtt连接信息
    getMqttConnectInfo(){
      if (!this.$mqttServer){
        return;
      }
      //   监听人数变化
      this.$mqttServer.on("message", (topic, message) => {
        if (topic === "/onlineUserNum"){
          this.onlineUserNum = + message;
        }
      });

      // 获取人数
      this.$https("/mqtt-api/getClientInfo", "get", {},1,{}).then((res) => {
        console.log(res)
        if (res.data.code === 200){
          this.onlineUserNum = res.data.data;
        }
      });
    },
    getTime(){
      setInterval(() => {
        this1.today = new Date().Format("yyyy-MM-dd hh:mm:ss")
      }, 1000);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  //   局部切换页面
    switchPage(value){
        this.toPage = value
    }
  }
}
</script>

<template>
  <el-row :gutter="24" >
    <el-col :span="6" style="height: 800px">
      <h5 class="mb-2">功能列表</h5>
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo scroll_enabled"
          @open="handleOpen"
          @close="handleClose"
          style="height: 570px;overflow-y: auto;"
      >
        <div v-for="(item,index) in menu" :key="index">
          <el-menu-item :index="index + ''" v-if="item.noChildren" :class="toPage===item.value?'active':''"  style="border-radius: 10px"  @click="switchPage(item.value)">
            <el-icon><el-icon><Star /></el-icon></el-icon>
            <span>{{ item.label }}</span>
          </el-menu-item>
          <el-sub-menu :index="index + ''" v-else >
            <template #title>
              <el-icon><el-icon><Star /></el-icon></el-icon>
              <span>{{ item.label }}</span>
            </template>
              <el-menu-item :index="index + '-' + index2" v-for="(item2,index2) in item.children" :key="index2"  @click="switchPage(item2.value)" :class="toPage===item2.value?'active':''" >
                <el-icon><Star /></el-icon>
                <span>{{ item2.label }}</span>
              </el-menu-item>
          </el-sub-menu>
        </div>
      </el-menu>

      <div id="connect-status" style="width: 100%;;height: 100px;display: flex;justify-content: center;align-items: center;" >
        <div style="text-align: center">
          <div>已连接至服务器</div>
          <div style="font-weight: inherit;font-size: 14px">{{today}}</div>
          <div style="font-weight: inherit;font-size: 14px">版本4.0.0</div>
          <div style="font-weight: inherit;font-size: 14px">{{'当前在线人数: ' + onlineUserNum}}</div>
        </div>
      </div>
    </el-col>
    <el-col :span="18">
<!--      {{toPage}}-->
<!--      直接组件引入使用  -->
      <hello v-if="toPage === 'hello'"></hello>
      <JavaConfig v-if="toPage === 'JavaConfig'"></JavaConfig>
      <JavaDownload v-if="toPage === 'JavaDownload'"></JavaDownload>
      <frpVersion v-if="toPage === 'frpVersion'"></frpVersion>
      <fastMapping v-if="toPage === 'fastMapping'"></fastMapping>
      <frpMonitor v-if="toPage === 'frpMonitor'"></frpMonitor>
      <sendEmail v-if="toPage === 'sendEmail'"></sendEmail>
    </el-col>
  </el-row>
</template>

<style scoped>
@keyframes connect-status {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}


#connect-status {
  //background-image:linear-gradient(90deg,#4facfe ,#00f2fe 100%);
  font-weight: bold;
  background-image: linear-gradient(to right, #4facfe , yellow, green, yellow, red);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  color: transparent;
  animation: connect-status 2s infinite linear;
  border-top: 1px solid #ccc;
  width: 100%;
  font-size: 17px;
}
  .scroll_enabled::-webkit-scrollbar {
    width: 10px;
  }
  .scroll_enabled::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
  }
  .scroll_enabled::-webkit-scrollbar-thumb {
    background-image:linear-gradient(120deg,#e0c3fc ,#8ec5fc 100%);
    border-radius: 6px;
    border: 4px solid rgba(0,0,0,0);
  }
  .scroll_enabled::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0);
  }
  .active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
</style>